<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MPA Demo - 页面2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input, button {
            padding: 8px;
            margin: 5px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        nav {
            margin-bottom: 20px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .counter-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="page1.html">页面1</a>
        <a href="page2.html">页面2</a>
    </nav>
    
    <div class="container">
        <h1>MPA Demo - 页面2</h1>
        <p>这是MPA的第二个页面，展示了另一个数据绑定的例子。</p>
        
        <h2>计数器示例</h2>
        <p>这个示例展示了如何在MPA中手动管理状态：</p>
        
        <div class="counter-container">
            <button id="decrementBtn">-</button>
            <span id="counterValue">0</span>
            <button id="incrementBtn">+</button>
        </div>
        
        <div style="margin-top: 20px;">
            <h3>控制台验证说明：</h3>
            <p>1. 点击"+"或"-"按钮改变计数器值</p>
            <p>2. 打开浏览器控制台，输入 <code>console.log(window.mpaCounter.getCount())</code> 查看当前值</p>
            <p>3. 在控制台中输入 <code>window.mpaCounter.setCount(10)</code> 设置计数器值为10</p>
            <p>4. 注意：这个计数器状态不会在页面间共享，切换到页面1再回来会重置</p>
        </div>
        
        <div style="margin-top: 20px;">
            <h3>MPA vs SPA 对比</h3>
            <p>在MPA中：</p>
            <ul>
                <li>每个页面都是独立的HTML文档</li>
                <li>数据不会自动在页面间共享</li>
                <li>需要手动实现数据绑定</li>
                <li>页面切换会重新加载整个页面</li>
            </ul>
            <p>相比之下，SPA（单页面应用）提供了开箱即用的双向数据绑定和状态管理。</p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const counterValue = document.getElementById('counterValue');
        const incrementBtn = document.getElementById('incrementBtn');
        const decrementBtn = document.getElementById('decrementBtn');
        
        // 计数器状态
        let count = 0;
        
        // 更新显示
        function updateDisplay() {
            counterValue.textContent = count;
        }
        
        // 事件处理
        incrementBtn.addEventListener('click', function() {
            count++;
            updateDisplay();
            console.log('计数器增加:', count);
        });
        
        decrementBtn.addEventListener('click', function() {
            count--;
            updateDisplay();
            console.log('计数器减少:', count);
        });
        
        // 在控制台暴露变量以便验证
        window.mpaCounter = {
            getCount: function() {
                return count;
            },
            setCount: function(newCount) {
                count = newCount;
                updateDisplay();
                console.log('计数器设置为:', count);
            }
        };
        
        console.log('MPA Demo 页面2已加载。使用 window.mpaCounter 对象进行控制台验证。');
    </script>
</body>
</html>